<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <link rel="icon" href="res/img/drops.ico" type="image/x-icon">
    <link rel="Shortcut icon" href="res/img/drops.ico" type="image/x-icon">
    <script src="./js/site.js" type="text/javascript"></script>
    <script type="text/javascript">
        var url = document.location.toString();               
        if(url.indexOf("/") != -1){  
            url = url.substring(0,  url.lastIndexOf("/")) ;  
        }  
        uaredirect(url+"/phone/home.html");
    </script>

    <title>小宇の窝</title>
</head>

<style>

    .inscription {
        writing-mode: vertical-rl;
        writing-mode: tb-rl;
        color: white;
        position: absolute;
        right: 0;
        margin: 50px 175px;
        font-size: 1.25rem;
        font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    }

    span {
        display: block;
        width: 32px;
    }

    .inscription_mask {
        height: 0;
        white-space: nowrap;
        overflow: hidden;
        color: #5A964E;
        text-shadow: 0 0 3px #458C67;
    }


    @keyframes short {
        from {
            height: 0;
        }
        to {
            height: 10rem;
        }
    }

    @keyframes long {
        from {
            height: 0;
        }
        to {
            height: 20rem;
        }
    }

    /* span:nth-of-type(1) {
        animation: short 2.9s linear forwards;
    }
    span:nth-of-type(8) {
        animation: long 2.9s linear forwards;
    } */
</style>


<body style="background-color:#232323;
            background-image:url(res/img/back.jpg);
            background-size:cover;
            background-repeat:no-repeat;">

    <div class="inscription">
        <span>凌波不过横塘路，</span>
        <span>但目送、芳尘去。</span>
        <span>锦瑟华年谁与度？</span>
        <span>月桥花院，琐窗朱户，只有春知处。</span>
        <span>飞云冉冉蘅皋暮，</span>
        <span>彩笔新题断肠句。</span>
        <span>试问闲情都几许？</span>
        <span>一川烟草，满城风絮，梅子黄时雨。</span>

    </div>

    <div class="inscription" id="mask">
        <span class="inscription_mask">凌波不过横塘路，</span>
        <span class="inscription_mask">但目送、芳尘去。</span>
        <span class="inscription_mask">锦瑟华年谁与度？</span>
        <span class="inscription_mask">月桥花院，琐窗朱户，只有春知处。</span>
        <span class="inscription_mask">飞云冉冉蘅皋暮，</span>
        <span class="inscription_mask">彩笔新题断肠句。</span>
        <span class="inscription_mask">试问闲情都几许？</span>
        <span class="inscription_mask">一川烟草，满城风絮，梅子黄时雨。</span>
    </div>


    <!-- <audio autoplay="true" loops hidden="true">
        <source src="res/sound/bgm.mp3" type="audio/mp3">
    </audio> -->
</body>

<script type="text/javascript">
    //add animation
    var spans = document.getElementById("mask").getElementsByClassName("inscription_mask");
    for (var i = 0; i < spans.length; i++) {

        var delay = i <= 3 ? i * 4 + 2 : i * 4 + 6;
        if (i == 3 || i == 7) {
            spans[i].style.animation = "long 8s linear " + delay + "s forwards";
        } else {
            spans[i].style.animation = "short 4s linear " + delay + "s forwards";
        }

        spans[7].addEventListener("webkitAnimationEnd", gotoHomePage);
        spans[7].addEventListener("animationend", gotoHomePage);
    }

    function gotoHomePage() {
        // setTimeout(function () {
        //     window.location.replace('html/home.html');
        // }, 2000);
    }

</script>

</html>